<template>
  <div class="add_box">
    <span>数据列表</span>
    <span>
      <el-button @click="addFun(1, '')">添加</el-button>
    </span>
  </div>
  <!-- 列表数据 -->
  <div class="table_list">
    <el-table :data="tableData.data" style="width: 100%" :border="true">
      <el-table-column prop="id" label="编号" width="80" />
      <el-table-column prop="name" label="秒杀时间段名称" width="150" />
      <el-table-column label="开始时间" width="250">
        <template #default="scope">
          <div>
            {{
              scope.row.startTime
                ? dayjs(scope.row.handleTime).format("YYYY-MM-DD HH:mm:ss")
                : ""
            }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="结束时间" width="250">
        <template #default="scope">
          <div>
            {{
              scope.row.endTime
                ? dayjs(scope.row.handleTime).format("YYYY-MM-DD HH:mm:ss")
                : ""
            }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="启用" width="150">
        <template #default="scope">
          <el-switch
            @click="changeStatus(scope.row.id, scope.row.status)"
            :model-value="scope.row.status === 1 ? true : false"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="177" flex="right">
        <template #default="scope">
          <span class="spn1" @click="addFun(2, scope.row)">编辑</span>
          <span class="spn2" @click="delDataFun(scope.row.id)">删除</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!-- 删除活动 -->
  <el-dialog v-model="dialogVisible" title="" width="30%">
    <span>确定要删除吗？</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button @click="delListData2" type="primary"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 添加秒杀时间段 -->
  <el-dialog v-model="addTimeout" title="添加时间段" width="30%">
    <template #footer>
      <div class="example_basic">
        <div><span>秒杀时间段：</span><el-input v-model="timeName" /></div>
        <div>
          <span>开始时间段：</span
          ><el-time-picker v-model="value1" placeholder="选择开始时间" />
        </div>
        <div>
          <span>结束时间段：</span
          ><el-time-picker v-model="value2" placeholder="选择结束时间" />
        </div>
        <div>
          <span>是否启用</span
          ><span
            ><div class="mb-2 flex items-center text-sm">
              <el-radio-group v-model="radio1" class="ml-4">
                <el-radio label="0" size="large">不启用</el-radio>
                <el-radio label="1" size="large">启用</el-radio>
              </el-radio-group>
            </div></span
          >
        </div>
        <div>
          <el-button @click="addTimeout = false">取消</el-button>
          <el-button type="primary" @click="addTimeoutFun">确认</el-button>
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";
import * as api from "../../request/api";
import { ElMessageBox } from "element-plus";
import dayjs from "dayjs";
import router from "../../router";
import { add } from "lodash";

// 删除
let dialogVisible = ref(false);
let delId = ref(0);
let delDataFun = (myid: number) => {
  delId.value = myid;
  dialogVisible.value = true;
};
let delListData2 = () => {
  api.flashlist.FlashSessionDelete(delId.value);
  getProductList();
  dialogVisible.value = false;
};
// 添加时间段
const radio1 = ref(1);
const timeName = ref("");
const value1 = ref();
const value2 = ref();
let addTimeout = ref(false);
let myKeyword = ref(0);
let myKeyId = reactive({
  createTime: null,
  endTime: "",
  id: 0,
  name: "",
  startTime: "",
  status: 0,
});

let addFun = (val: number, listData: any) => {
  addTimeout.value = true;
  myKeyword.value = val;
  myKeyId = listData;
  timeName.value = listData.name;
  console.log(myKeyId.name);
};

let addTimeoutFun = () => {
  console.log(timeName.value, value1.value, value2.value, radio1.value);
  console.log(myKeyword.value);
  if (myKeyword.value === 1) {
    console.log(111);
    api.flashlist.FlashSessionCreateApi({
      name: timeName.value,
      startTime: value1.value,
      endTime: value2.value,
      status: radio1.value,
    });
  } else if (myKeyword.value === 2) {
    console.log(222);
    api.homebrand
      .FlashSessionUpdateApi({
        createTime: null,
        id: myKeyId.id,
        name: timeName.value,
        startTime: value1.value,
        endTime: value2.value,
        status: radio1.value,
      })
      .then((res) => {
        console.log(res);
      });
  }
  getProductList();
  addTimeout.value = false;
};
// 修改上下线状态
let changeStatus = (myId: number, myStatus: number) => {
  if (myStatus === 1) {
    api.flashlist.FlashSessionUpdateStatusApi({
      id: myId,
      status: 0,
    });
    getProductList();
  } else if (myStatus === 0) {
    api.flashlist.FlashSessionUpdateStatusApi({
      id: myId,
      status: 1,
    });
    getProductList();
  }
};
// 列表数据
let tableData = reactive({
  data: <any>[],
  pageNum: 1,
  pageSize: 5,
  total: 28,
  totalPage: 6,
  nickName: "",
});
// 获取所有商品数据的请求
let getProductList = () => {
  api.flashlist.FlashSessionListApi().then((res) => {
    tableData.data = res;
    console.log(res);
  });
};
getProductList();
</script>

<style lang="scss" scoped>
.el-dialog {
  padding: 0;
  margin: 0;
  .el-id-7979-21 {
    padding: 0;
  }
  .example_basic {
    font-size: 14px;
    margin-right: 30px;
    margin-bottom: 40px;

    div {
      margin: 10px;
    }

    span {
      display: inline-block;
      //   width: 90px;
      padding: 0;
      margin: 0;
      margin-right: 10px;
    }
  }
}
.search {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 20px;
  background-color: #fff;
  .search_top {
    display: flex;
    justify-content: space-between;
  }
  .el-input {
    width: 200px;
  }
  .ipt_box {
    display: flex;
    flex-wrap: wrap;
  }
}
.add_box {
  display: flex;
  justify-content: space-between;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-top: 20px;
  height: 20px;
  align-items: center;
  padding: 20px;
  background-color: #fff;
}
img {
  height: 100px;
  width: 150px;
}
.table_list {
  margin-top: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
.el-pagination {
  font-size: 12px;
  float: right;
}
.foot_box {
  margin-top: 20px;
  float: right;
}
.spn1,
.spn2 {
  color: skyblue;
  padding: 5px;
  cursor: pointer;
}

.el-input {
  width: 200px;
}
</style>
